<template>
  <div>
    <tool-bar nav="" title='AppBase64编码'></tool-bar>

    <kv label="输入">

      <div style="display:flex;flex-direction:row;gap:12px;">
        <el-input v-model="$data.txt1">
          <template #prepend>AppName</template>
        </el-input>

        <el-input v-model="$data.txt2">
          <template #prepend>值</template>
        </el-input>
      </div>
    </kv>


    <kv label="Base64">
      <el-button @click="en_click">加密⤵</el-button>

      <el-button @click="de_click">解密⤴</el-button>
    </kv>


    <kv label="结果">
      <div>
        = base64({AppName}|{value})
      </div>
      <el-input type="textarea" v-model="$data.txt3" :rows="4"></el-input>
    </kv>

  </div>
</template>
<script setup>
/**
 * Created by CodeGenerator
 */


defineOptions({
  name: "query-json",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({txt1: "", txt2: "", txt3: ""});


const $props = defineProps({});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

//
// const sumAscii = str => [...str].reduce((sum, char) => sum + char.charCodeAt(0), 0);
//
// // 简单的 XOR 编码器
// function xorEncode(str, key  ) {
//   const result = [];
//   for (let i = 0; i < str.length; i++) {
//     const charCode = str.charCodeAt(i);
//     result.push(String.fromCharCode(charCode ^ key));
//   }
//   // 转为 Base64，便于传输
//   return btoa(unescape(encodeURIComponent(result.join(''))));
// }
//
// // 解码
// function xorDecode(encodedStr, key ) {
//   // 先从 Base64 解码回混淆字符串
//   const mixed = decodeURIComponent(escape(atob(encodedStr)));
//
//   const result = [];
//   for (let i = 0; i < mixed.length; i++) {
//     const charCode = mixed.charCodeAt(i);
//
//     result.push(String.fromCharCode(charCode ^ key));
//   }
//   return result.join('');
// }
const en_click = function () {
  $data.txt3 = "";
  jv.$saveData("txt1", $data.txt1);
  jv.$saveData("txt2", $data.txt2);


  $data.txt3 = jv.encodeBase64($data.txt1.trim() + "|" + $data.txt2);
};


const de_click = function () {
  var de = jv.decodeBase64($data.txt3).split("|");
  if (de.length != 2) {
    $data.txt1 = "";
    $data.txt2 = "";

    return jv.error("解码失败")
  }

  $data.txt1 = de[0];
  $data.txt2 = de[1];
};


onMounted(function () {
  jv.$loadData("txt1", v => $data.txt1 = v);
  jv.$loadData("txt2", v => $data.txt2 = v);
});

</script>

<style lang="scss" scoped>
::v-deep(.kv>.k) {
  flex: 1;
}

::v-deep(.kv>.v>:first-child) {
  max-width: unset;
}

.grid {
  position: relative;
  margin-left: 20px !important;
  margin-top: 20px !important;


  ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
    height: 100%;
  }
}

.op_column {
  padding-top: 150px;
  padding-bottom: 150px;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  align-content: space-around;
  position: relative;
  height: 100%;


  button {
    display: block;
    margin: 10px 6px;
  }

}
</style>